<template>
  <div class="com">
    <div class="seachlist">
      <div class="listitem">
        <div class="itemname">统计时段</div>
        <el-date-picker
          v-model="value1"
          style="width:250px;"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        ></el-date-picker>
      </div>
      <div class="listitem">
        <div class="itemname">媒介类型</div>
        <el-select v-model="value" style="width:200px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="listitem">
        <div class="itemname">媒体</div>
        <el-select v-model="value" style="width:200px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="listitem">
        <div class="itemname">节目</div>
        <el-select v-model="value" style="width:200px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" style="margin-left:20px;">搜索</el-button>
      </div>
    </div>
    <div class="infocom">
      <div class="comitem1" id="myChart1"></div>
      <div class="comitem1" id="myChart2"></div>
      <div class="comitem1" id="myChart3"></div>
      <div class="bing">
        <div class="bingitem" id="myChart4"></div>
        <div class="bingitem" id="myChart5"></div>
        <div class="bingitem" id="myChart6"></div>
        <div class="bingitem" id="myChart7"></div>
      </div>
      <div class="comitem1" id="myChart8"></div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import {
  getALL_month_INFO,
  getALL_yeaer_INFO,
  getALL_bing_INFO,
  getALL_quarterly_INFO,
  getALL__account
} from "../../../api/decision.js";
import { color } from 'echarts/lib/export';
var actualData1 = [8, 9, 10, 16, 15, 7]; //实际值
var warningData1 = [10, 10, 10, 10, 10, 10]; //预警值

var actualData2 = [28, 19, 10, 26, 25, 17]; //实际值
var warningData2 = [20, 20, 20, 20, 20, 20]; //预警值

var actualData3 = [8, 21, 10, 22, 7, 10]; //实际值
var warningData3 = [15, 15, 15, 15, 15, 15]; //预警值

var actualData4 = [16, 12, 13, 15, 7, 8]; //实际值
var warningData4 = [18, 18, 18, 18, 18, 18]; //预警值

var actualData5 = [9, 5, 5, 5, 7, 10]; //实际值
var warningData5 = [8, 8, 8, 8, 8, 8]; //预警值
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        }
      ],
      value: "",
      value1: "",
      echarts1: {
        title: {
          text: "当年月份销售趋势"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ["销售额", "同比增长率", "环比增长率"]
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "销售额",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} 百万元"
            }
          },
          {
            type: "value",
            name: "增长率",
            min: -100,
            max: 200,
            interval: 50,
            axisLabel: {
              formatter: "{value}% "
            }
          }
        ],
        series: [
          {
            name: "销售额",
            type: "bar",
            data: []
          },
          {
            name: "同比增长率",
            type: "line",
            data: []
          },
          {
            name: "环比增长率",
            type: "line",
            yAxisIndex: 1,
            data: []
          }
        ]
      },
      echarts2: {
        title: {
          text: "各媒介季度成本/利润分布图"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          x: "center",
          //y:'30',
          y: "bottom",
          data: []
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: ["第一季度", "第二季度", "第三季度", "第四季度"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "平均利润",
            type: "line",
            data: [19.1, 168.2, 422.48, "-"]
          },
          {
            name: "平均利润",
            type: "line",
            smooth: false, //关键点，为true是不支持虚线，实线就用true
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  color: "#ab40db",
                  type: "dotted" //'dotted'虚线 'solid'实线
                }
              }
            },
            data: ["-", "-", 422.48, 470.5]
          }
        ]
      },

      echarts8: {
        tooltip: {
          trigger: "axis"
        },
        title: {
          text: "各账户溢满情况",
          subtext: ""
        },
        legend: {
          x: "center",
          y: "bottom",
          data: [
         
          ]
          /*selected: {
                            '账户B': false,
                            '账户B上限': false,
                            '账户C': false,
                            '账户C上限': false,
                            '账户D': false,
                            '账户D上限': false,
                            '账户E': false,
                            '账户E上限':false
                        }*/
        },
        /*grid: [{
                        top: '10%',
                        left: '30%',
                        width: '50%',
                        height: '40%',
                        containLabel: false,
                    }],*/
        xAxis: 
          {
            type: "category",
            name: "月份",
            data: []
          }
        ,
        yAxis: [
          {
            type: "value",
            name: "金额"
          }
        ],
        series: []
      },
      yearobj: {
        title: {
          text: "年度销售趋势"
          //x:'center',
          // subtext: '数据纯属虚构'
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          y: "bottom",
          data: ["销售额", "环比增长率"]
        },
        xAxis: [
          {
            type: "category",
            axisLine: { onZero: true },
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "销售额",
            min: 0,
            max: 600,
            interval: 100,
            axisLabel: {
              formatter: "{value} 千万元"
            }
          },
          {
            type: "value",
            name: "增长率",
            min: -20,
            max: 40,
            interval: 10,
            axisLabel: {
              formatter: "{value} %"
            }
          }
        ],
        series: [
          {
            name: "销售额",
            type: "bar",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#e84646"
                }
              }
            },
            data: []
          },
          {
            name: "环比增长率",
            type: "line",
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#b75ce0"
                }
              }
            },
            data: []
          }
        ]
      }
    };
  },
  created() {
    this.getmonth();
    this.getyear();
    this.getbing();
    this.getquarterly();
    this.getaccount()
  },
  mounted() {

    // this.drawLine2();
    // this.drawLine3();
    // this.drawLine4();
    // this.drawLine5();

    // this.drawLine6();

    // this.drawLine7();
    // this.drawLine8();
  },
  methods: {
    getaccount(){
    getALL__account().then(res=>{
      if(res.code==200){
        console.log(res)
        var month=res.data.month
        var Xcolor=[]
        var Series=[]
        var _this=this
        res.data.data.forEach((element,index) => {
          element.forEach((el,i) => {
            Xcolor.push(el.name)
            if(i==0){
              Series.push(  {
            name: el.name,
            type: "bar",
            //barWidth: 40,
            itemStyle: {
              normal: {
                //这里必须加normal,否者不显示夜色变化
                color: function(params) {
                  //超过预警值显示红色
                  if (
                    el.data[params.dataIndex] >
                    element[1].data[params.dataIndex]
                  ) {
                    return _this.rgb();
                  } else {
                    return _this.rgb();
                  }
                }
              }
            },
            data: el.data
          },)
            }
            if(i==1){
              Series.push({
            name: el.name,
            type: "line",
            data: el.data,
            itemStyle: {
              normal: {
                color: _this.rgb()
              }
            }
          },)
            }
          });
        });
        console.log(Series)
        this.echarts8.legend.data=Xcolor
        this.echarts8.xAxis.data=month
        this.echarts8.series=Series
        
    this.drawLine8(this.echarts8);

      }
    })
    },
    rgb(){//rgb颜色随机
			var r = Math.floor(Math.random()*256);
			var g = Math.floor(Math.random()*256);
			var b = Math.floor(Math.random()*256);
			var rgb = 'rgb'+'('+r+','+g+','+b+')';
			return rgb;
		},

    //获取季度详情
    getquarterly() {
      var obj = {
        title: {
          text: "各媒介季度成本/利润分布图",
          //x:'center',
          subtext: "数据纯属虚构"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          x: "center",
          //y:'30',
          y: "bottom",
          data: []
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: ["第一季度", "第二季度", "第三季度", "第四季度"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
        
        ]
      };
      getALL_quarterly_INFO().then(res => {
        var Xcolor = [];
        var series = [];
        var one1 = [];
        var one2 = [];
        var one3 = [];
        var one4 = [];
        for (const key in res.data) {
          if (res.data.hasOwnProperty(key)) {
            const element = res.data[key];
            element.data.forEach((el, index) => {
              Xcolor.push(el.name);
              series.push({
                name: el.name,
                type: "bar",
                data: el.data,
                stack: element.name
              });
              if(index==1){
                el.data.forEach((num,i) => {
                  if(i==0){
                    one1.push(num)
                  }
                  if(i==1){
                    one2.push(num)
                  }
                  if(i==2){
                    one3.push(num)
                  }
                  if(i==3){
                    one4.push(num)
                  }
                });
              }
            });
          }
        }
        series.push( {
            name: "平均利润",
            type: "line",
            smooth: true, //关键点，为true是不支持虚线，实线就用true
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  color: "#ab40db",
                  type: "dotted" //'dotted'虚线 'solid'实线
                }
              }
            },
            data: [this.maxcomputed(one1), this.maxcomputed(one2), this.maxcomputed(one3), this.maxcomputed(one4)]
          })
        obj.series = obj.series.concat(series);
        obj.legend.data = Xcolor;
        this.drawLine2(obj);
      });
    },
    //获取饼状tu
    getbing() {
      getALL_bing_INFO().then(res => {
        if (res.code == 200) {
          var obj = {
            title: {
              text: "",
              left: "center"
            },
            tooltip: {
              trigger: "item",
              formatter: "{b} : {c} ({d}%)"
            },
            legend: {
              // orient: 'vertical',
              // top: 'middle',
              bottom: 10,
              left: "center",
              data: []
            },
            series: [
              {
                type: "pie",
                radius: "65%",
                center: ["50%", "50%"],
                selectedMode: "single",
                data: [
                  // { value: 535, name: "荆州" },
                  // { value: 510, name: "兖州" },
                  // { value: 634, name: "益州" },
                  // { value: 735, name: "西凉" }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  }
                }
              }
            ]
          };
          obj.title.text = "自有媒体营销渠道分析";
          var string = [
            "{title|{b}}{abg|}",
            "  {weatherHead|单位}{valueHead|销售额}{rateHead|占比}",
            "{hr|}"
          ];
          res.data.self.forgen.data.forEach(element => {
            string.push(
              "{Sunny|}" +
                element.door +
                "{value|" +
                element.sale +
                "}{rate|" +
                element.point +
                "}"
            );
          });

          obj.series[0].data.push({
            value: res.data.self.forgen.num,
            name: res.data.self.forgen.name,
            label: {
              formatter: string.join("\n"),
              backgroundColor: "#eee",
              borderColor: "#777",
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                title: {
                  color: "#eee",
                  align: "center"
                },
                abg: {
                  backgroundColor: "#333",
                  width: "100%",
                  align: "right",
                  height: 25,
                  borderRadius: [4, 4, 0, 0]
                },
                Sunny: {
                  height: 30,
                  align: "left",
                  backgroundColor: {
                    // image: weatherIcons.Sunny
                  }
                },

                weatherHead: {
                  color: "#333",
                  height: 24,
                  align: "left"
                },
                hr: {
                  borderColor: "#777",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0
                },
                value: {
                  width: 20,
                  padding: [0, 20, 0, 30],
                  align: "left"
                },
                valueHead: {
                  color: "#333",
                  width: 20,
                  padding: [0, 20, 0, 30],
                  align: "center"
                },
                rate: {
                  width: 40,
                  align: "right",
                  padding: [0, 10, 0, 0]
                },
                rateHead: {
                  color: "#333",
                  width: 40,
                  align: "center",
                  padding: [0, 10, 0, 0]
                }
              }
            }
          });
          obj.series[0].data.push({
            name: res.data.self.self.name,
            value: res.data.self.self.num
          });
          obj.legend.data = [
            res.data.self.forgen.name,
            res.data.self.self.name
          ];

          this.drawLine4(obj);
          obj.title.text = "资源销售分部";
          var arr_fb = [
            "{title|{b}}{abg|}",
            "  {weatherHead|单位}{valueHead|销售额}{rateHead|占比}",
            "{hr|}"
          ];
          res.data.resources.resource_door.data.forEach(element => {
            arr_fb.push(
              "{Sunny|}" +
                element.door +
                "{value|" +
                element.sale +
                "}{rate|" +
                element.point +
                "}"
            );
          });
          obj.series[0].data = [];
          obj.series[0].data.push({
            value: res.data.resources.resource_door.num,
            name: res.data.resources.resource_door.name,
            label: {
              formatter: arr_fb.join("\n"),
              backgroundColor: "#eee",
              borderColor: "#777",
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                title: {
                  color: "#eee",
                  align: "center"
                },
                abg: {
                  backgroundColor: "#333",
                  width: "100%",
                  align: "right",
                  height: 25,
                  borderRadius: [4, 4, 0, 0]
                },
                Sunny: {
                  height: 30,
                  align: "left",
                  backgroundColor: {
                    // image: weatherIcons.Sunny
                  }
                },

                weatherHead: {
                  color: "#333",
                  height: 24,
                  align: "left"
                },
                hr: {
                  borderColor: "#777",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0
                },
                value: {
                  width: 20,
                  padding: [0, 20, 0, 30],
                  align: "left"
                },
                valueHead: {
                  color: "#333",
                  width: 20,
                  padding: [0, 20, 0, 30],
                  align: "center"
                },
                rate: {
                  width: 40,
                  align: "right",
                  padding: [0, 10, 0, 0]
                },
                rateHead: {
                  color: "#333",
                  width: 40,
                  align: "center",
                  padding: [0, 10, 0, 0]
                }
              }
            }
          });
          obj.series[0].data.push({
            name: res.data.resources.self_door.name,
            value: res.data.resources.self_door.num
          });
          obj.legend.data = [
            res.data.resources.resource_door.name,
            res.data.resources.self_door.name
          ];
          this.drawLine5(obj);
          obj.title.text = "产品营销方式分析";
          obj.series[0].data = [];

          var title = [];
          for (const key in res.data.product) {
            if (res.data.product.hasOwnProperty(key)) {
              const element = res.data.product[key];
              title.push(element.name);
              obj.series[0].data.push({
                name: element.name,
                value: element.num
              });
            }
          }
          obj.legend.data = title;
          this.drawLine6(obj);
          obj.title.text = "合同回款分析";
          obj.series[0].data = [];
          title = [];
          for (const key in res.data.back_money) {
            if (res.data.back_money.hasOwnProperty(key)) {
              const element = res.data.back_money[key];
              title.push(element.name);
              obj.series[0].data.push({
                name: element.name,
                value: element.num
              });
            }
          }
          obj.legend.data = title;
          this.drawLine7(obj);
        }
      });
    },
    //获取年份销售趋势
    getyear() {
      getALL_yeaer_INFO().then(res => {
        if (res.code == 200) {
          var year = [];
          var sale = [];
          var range = [];
          res.data.forEach(element => {
            year.push(element.year);
            sale.push(element.data.sale);
            range.push(element.data.range);
          });
          this.yearobj.xAxis[0].data = year;
          this.yearobj.series[0].data = sale;
          this.yearobj.series[1].data = range;
          this.drawLine3();
        }
      });
    },
    //获取当前月份销售趋势
    getmonth() {
      getALL_month_INFO().then(res => {
        if (res.code == 200) {
          this.echarts1.series[0].data = res.data.sale;
          this.echarts1.series[1].data = res.data.add;
          this.echarts1.series[2].data = res.data.range;
          this.drawLine1();
        }
      });
    },
    drawLine8(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart8"));
      // 绘制图表
      // console.log("xxxxxxx");
      myChart.setOption(data);
    },

    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      // console.log("xxxxxxx");
      myChart.setOption(this.echarts1);
    },
    drawLine4(obj) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart4"));
      // 绘制图表
      myChart.setOption(obj);
    },
    drawLine5(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart5"));
      // 绘制图表
      myChart.setOption(data);
    },
    drawLine6(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart6"));
      // 绘制图表
      myChart.setOption(data);
    },
    drawLine7(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart7"));
      // 绘制图表
      myChart.setOption(data);
    },
    drawLine3() {
      // this.echarts1.title.text = "年度销售趋势";
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart3"));
      // 绘制图表
      myChart.setOption(this.yearobj);
    },
    drawLine2(obj) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart2"));
      // 绘制图表
      myChart.setOption(obj);
    },
    maxcomputed(nums){
      return Math.floor(nums.reduce((a, b) => a + b) / nums.length)
    },
  }
};
</script>
<style lang="scss" scoped>
.seachlist {
  width: 97%;

  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  .listitem {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .itemname {
      width: 100px;
    }
  }
}
.infocom {
  width: 100%;
  margin-top: 20px;
}
.comitem1 {
  width: 97%;
  height: 350px;
  margin-bottom: 20px;
  // background: red;
}
.bing {
  width: 100%;
  height: 650px;
  display: flex;
  flex-wrap: wrap;
  .bingitem {
    width: 50%;
    height: 50%;
    // background: red;
  }
}
</style>